<template>
	<el-row :gutter="40">
		<el-col v-if="!form.$treeNodeId">
			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="12">
				<h2>路由权限</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="显示名称" prop="meta.title">
						<el-input v-model="form.meta.title" clearable placeholder="菜单显示名字"></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="pid">
						<el-cascader v-model="form.pid" :options="menuOptions" :props="menuProps"
							:show-all-levels="false" placeholder="顶级菜单" clearable disabled></el-cascader>
					</el-form-item>
					<el-form-item label="类型" prop="meta.type">
						<el-radio-group v-model="form.type" @change="typeChange">
							<el-radio-button :label="0">系统</el-radio-button>
							<el-radio-button :label="1">目录</el-radio-button>
							<el-radio-button :label="2">菜单</el-radio-button>
							<el-radio-button :label="3">iframe</el-radio-button>
							<el-radio-button :label="4">Link</el-radio-button>
							<el-radio-button :label="5">按钮</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单图标" prop="meta.icon">
						<sc-icon-select v-model="form.meta.icon" clearable></sc-icon-select>
					</el-form-item>
					<el-form-item v-if="form.type == 1 || form.type == 2 || form.type == 3 || form.type == 4"
						label="路由地址" prop="path">
						<el-input v-model="form.path" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="form.sort" controls-position="right" :min="1"
							style="width: 100%;"></el-input-number>
					</el-form-item>

					<el-form-item v-if="form.type == 5" label="按钮编码" prop="buttonNum">
						<el-input v-model="form.buttonNum" clearable placeholder="按钮编码"></el-input>
					</el-form-item>

					<el-form-item label="权限编码" prop="num">
						<el-input v-model="form.num" clearable placeholder="权限编码"></el-input>
					</el-form-item>
					<el-form-item label="是否有效" prop="enable">
						<el-switch v-model="form.enable" :active-value="0" :inactive-value="1"></el-switch>
					</el-form-item>
					<el-form-item label="是否隐藏" prop="meta.hidden">
						<el-switch v-model="form.meta.hidden" :active-value="true" :inactive-value="false"></el-switch>
					</el-form-item>
					<el-form-item label="数据权限" prop="dataPower">
						<el-switch v-model="form.dataPower" :active-value="'0'"
							:inactive-value="'1'"></el-switch>
					</el-form-item>
					<el-form-item label="描述" prop="description">
						<el-input v-model="form.description" clearable placeholder="描述"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>

			</el-col>
			<el-col :lg="12" class="apilist">
				<h2>接口权限</h2>
				<sc-form-table v-model="form.apiList" :addTemplate="apiListAddTemplate" placeholder="暂无匹配接口权限">
					<el-table-column prop="code" label="标识" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="url" label="Api url">
						<template #default="scope">
							<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-col>
		</template>
	</el-row>

</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import { number } from 'echarts'

export default {
	components: {
		scIconSelect
	},
	props: {
		menu: { type: Object, default: () => { } },
	},
	data() {
		return {
			form: {
				id: "",
				pid: "",
				name: "",
				path: "",
				sort: 0,
				buttonNum: '',
				dataPower: null,
				num: "",
				redirect: "",
				enable: null,
				description: "",
				apiList: []
			},
			menuOptions: [],
			menuProps: {
				value: 'id',
				label: 'title',
				checkStrictly: true
			},
			predefineColors: [
				'#ff4500',
				'#ff8c00',
				'#ffd700',
				'#67C23A',
				'#00ced1',
				'#409EFF',
				'#c71585'
			],
			rules: [],
			apiListAddTemplate: {
				code: "",
				url: ""
			},
			loading: false
		}
	},
	watch: {
		menu: {
			handler() {
				this.menuOptions = this.treeToMap(this.menu)
			},
			deep: true
		}
	},
	mounted() {

	},
	methods: {
		typeChange(value) {
			if (value == 2) {
				value = 'menu'
			}
			if (value == 3) {
				value = 'iframe'
			}
			if (value == 4) {
				value = 'link'
			}
			this.form.meta.type = value
		},

		//简单化菜单
		treeToMap(tree) {
			const map = []
			tree.forEach(item => {
				var obj = {
					id: item.id,
					pid: item.pid,
					title: item.meta.title,
					children: item.children && item.children.length > 0 ? this.treeToMap(item.children) : null
				}
				map.push(obj)
			})
			return map
		},
		//保存
		async save() {
			this.loading = true
			var data = {
				id: this.form.id,
				name: this.form.name,
				num: this.form.num,
				menu: this.form.path,
				icon: this.form.meta.icon,
				type: this.form.type,
				enable: this.form.enable,
				description: this.form.description,
				meta: this.form.meta,
				pid: this.form.pid,
				sort: this.form.sort,
				buttonNum: this.form.buttonNum,
				dataPower: this.form.dataPower
			}
			console.log(data);

			if (this.form.id || this.form.id > 0) {
				let res = await this.$API.basic.power.edit.post({ data: data })
				this.loading = false
				if (res && res.code == 0) {
					this.$message.success(res.message)
				}
			} else {
				let res = await this.$API.basic.power.add.post({ data: data })
				this.loading = false
				if (res && res.code == 0) {
					this.form.id = res.data
					this.$message.success(res.message)
				}
			}

		},
		//表单注入数据
		setData(data, pid) {
			console.log(data);
			this.form = data
			this.form.apiList = data.apiList || []
			this.form.pid = pid
		}
	}
}
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

.apilist {
	border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
	color: #fff;
}

[data-theme="dark"] .apilist {
	border-color: #434343;
}
</style>
